<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
	</head>

	<body>
		<div id="app">{{fullName}}{{age}}</div>

		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					firstName: "Dell",
					lastName: "Lee",
					fullName: "Dell Lee",
					age: 23
				},

				//推荐computed计算属性实现
				//监听器
				//注意watch中实监听的data中值的变化，watch中的函数名就是要监听的属性名称，当其改变时则触发相应的函数
				//应	区别methods中的方法
				

				watch: {
					firstName: function() {
						console.log("firstName改变了");
						this.fullName = this.firstName + " " + this.lastName;
					},
					lastName: function() {
						console.log("lastName改变了");
						this.fullName = this.firstName + " " + this.lastName;
					}
				},

				//methods方法
				//没有缓存机制
				//methods中的方法可以在双大括号中js表达式执行
				//

//				methods: {
//					fullName: function() {
//						console.log("计算了一次")
//						return this.firstName + " " + this.lastName;
//					}
//				}

				//计算属性,是内置的缓存，
				//1：如果计算属性依赖的属性没有改变，计算属性会根据缓存机制，不会重新计算
				//2：如果计算属性依赖的属性改变，计算属性会重新计算
				//3：计算属性也是属性，及data里的数据，用$data可以获取到，只是根据其他属性计算而来的属性
				//computed中函数名不是实例中的函数，而实例中属性
				
				//				computed:{
				//					fullName:function(){
				//						console.log("计算了一次")
				//						return this.firstName+" "+this.lastName
				//					}
				//				}

			})
		</script>
	</body>

</html>